<template>
	<view class="container">
		<u-navbar left-icon="false" left-icon-size="0" title="My Orders"></u-navbar>
		<view class="orders" :style="{marginTop: marginSwiperHeight}">
			<u-search shape="round" placeholder="search my order" bgColor="#fff" color="#515C6F" height="90rpx"
				searchIconSize="30" actionText="Search"></u-search>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				marginSwiperHeight: '',
			}
		},
		methods: {
			//导航栏的高度
			getBarHeight() {
				this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				this.marginSwiperHeight = this.iStatusBarHeight + 44 + 'px';
				console.log(this.marginSwiperHeight);
			},
		},
		created() {
			uni.pageScrollTo({
				scrollTop: 0, // 滚动到页面的目标位置（单位px）
				duration: 0 // 滚动动画的时长，默认300ms，单位 ms
			});
			this.getBarHeight();
		},
		onShow() {
			uni.pageScrollTo({
				scrollTop: 0, // 滚动到页面的目标位置（单位px）
				duration: 0 // 滚动动画的时长，默认300ms，单位 ms
			});
		}
	}
</script>

<style lang="scss">
	.orders {
			.u-search {
				padding-top: 30rpx;
				width: 90%;
				padding-left: 40rpx;
	
				text {
					color: #fff;
					font-size: 28rpx;
				}
	
				input {
					font-size: 32rpx;
				}
			}
	
			.u-search__action {
				background-color: #65DACC;
				padding: 12rpx 40rpx 12rpx 30rpx;
				border-radius: 40rpx;
			}
			// 输入框 placeholder样式	
			.u-search__content__input--placeholder {
				color: #BEBEBE;
			}
		}
</style>